<template>
	<ls-page title="" :leftClick='backFn'>
		<view class="queue-container">
			<view class="queue-container-header">
				<view class="header-left">
				<!-- 	<image class="header-img"
						src="https://oss.jtmckj.com/backend/Organize/202410719134232kongbaiquLOGO.png"
						mode="aspectFill" /> -->
						<image class="header-img" :src="shopInfo.attachment" mode=""></image>
					<view class="header-text">
						<view class="text-title">{{ shopInfo.orgName }}</view>
						<view class="text-value">
							营业时间：{{ shopInfo.orgStartTime }}-{{ shopInfo.orgEndTime }}</view>
					</view>
				</view>
				<!-- <view class="header-right"> <view class="header-right-heading__shop" bindtap="goCheckShop"> 切换门店 <text class="triangle"></text></view> </view> -->
			</view>
			<view class="queue-container-center">
				
				<view class="center-text"> 
					<image  v-if="themetype == '001'" style="width: 16rpx;height: 20rpx;" src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_icon_address.png" mode=""></image>
					<image   v-else style="width: 16rpx;height: 20rpx;" src="https://oss.jtmckj.com/wmp/kbq/common/i_icon_address.png" mode=""></image>
					<view class="" style="flex: 1;">
						{{ shopInfo.orgAddress }}
					</view>
				</view>
				<image v-if="themetype == '001'"  class="center-img" src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/newi_phone.png" mode="aspectFill"
					@click="onCall" />
				<image  v-else  class="center-img" src="https://oss.jtmckj.com/wmp/kbq/common/i_icon_phone.png" mode="aspectFill"
						@click="onCall" />
			</view>
			<view class="queue-container-main">
				<view class="main-li" v-for="(v, k) in waitLine" :key="k">
					<view class="li-left">{{ v.queneName }}</view>

					<view class="li-right">
						排队
						<text class="li-Sum">{{ v.queneCount }}</text>
						桌
					</view>
				</view>
			</view>
			<view class="queue-container-footer">
				<view class="footer-upper">{{ waitForm.callNo ? waitForm.callNo : '--' }}</view>
				<view class="footer-below">
					<view class="below-left">
						<view class="below-left-title">
							<text>
								<text>还需等待：</text>
								<text
									style="color: var(--one--self--color)">{{ waitForm.waitNum ? waitForm.waitNum : '--' }}</text>
							</text>
							<text style="color: var(--one--self--color)"></text>
							<view class="use-ticket" v-if="isUseMian">已使用免排队券</view>
							<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/qnjg/queue/btn-mpd.png"
								mode="widthFix" @tap="trueQueMask" v-if="waitForm.code" style="width: 144rpx" />
						</view>
						<view class="below-left-value">
							<text>
								<text>已等时长：</text>
								<text
									style="color: var(--one--self--color)">{{ waitForm.waitTime ? waitForm.waitTime : '--' }}</text>
							</text>
						</view>
					</view>
					<view class="below-right" @click="openCancleQue" v-if="waitForm.callNo">取消排队</view>
					<view class="below-right spe" @click="tableShow = true" v-if="!waitForm.callNo">立即取号</view>
				</view>
			</view>
			<view class="queue-container-bottom">
				<view class="bottom-text">听到叫号请到迎宾台，过号不作废，延三桌安排;</view>
				<view class="bottom-text">实际规则以门店线下说明为准。</view>
			</view>
		<!-- 	<image @tap="toPlp" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/images/home/queue/i_toPing1.png"
				mode="widthFix" style="width: 702rpx; margin-top: 20rpx" /> -->
			<!-- 代码拉出去 组件 -->
			<view class="h-60"></view>
			<!-- menuList.length > 0 && waitForm.callNo -->
			<view class="pre-menu-view" v-if="menuList.length > 0">
				<view class="pre-menu-title">我的预点菜</view>
				<view class="pre-menu-num">已点{{ menuList.length || 0 }}份</view>
				<view :id="item" v-for="(item, index) in menuList" :key="index">
					<view v-if="index < showNum">
						<view class="pre-menu-cell flex-row">
							<image v-if="item.attachment" :src="item.attachment" class="pre-menu-img" mode="aspectFill">
							</image>
							<image v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_default.png"
								class="pre-menu-img"></image>
							<view class="pre-menu-empty"></view>
							<view class="pre-menu-conten">
								<view class="flex-row" @tap="subCheckFun" :data-id="index">
									<view v-if="item.itemType === '1'" class="menu-type">单品</view>
									<view v-if="item.itemType === '2'" class="menu-type-tc">套餐</view>
									<view class="type-desc">{{ item.goodsName }}</view>
									<image v-if="item.detail.length > 0 && subMoreCheckIndex !== index"
										src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/diandan/icon-down.png"
										class="wh30-detail"></image>
									<image v-if="item.detail.length > 0 && subMoreCheckIndex === index"
										src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/diandan/icon-down.png"
										class="wh30-detail-rotate"></image>
								</view>
								<view class="menu-desc">规格：{{ item.flavor || '暂无' }}</view>
								<view class="flex-row-bt">
									<view class="flex-row"
										style="width: 400rpx; white-space: nowrap; text-overflow: ellipsis">
										<view class="price">￥{{ item.salePrice }}</view>
									</view>
									<view class="price-num">x{{ item.orderQty }}</view>
								</view>
							</view>
						</view>
						<!-- 套餐商品 list 详情 -->
						<view class="flex-row" v-if="item.detail.length > 0 && subMoreCheckIndex === index"
							style="margin: 20rpx 0">
							<view style="width: 140rpx"></view>
							<view style="width: calc(100% - 140rpx); border-top: 1rpx solid rgb(236, 236, 236)">
								<view :id="subItem" v-for="(subItem, subIndex) in item.detail" :key="subIndex">
									<view class="flex-row-bt"
										style="height: 50rpx; width: 100%; line-height: 50rpx; margin-top: 10rpx">
										<view style="font-size: 26rpx; width: 400rpx; overflow-x: hidden; color: #fff">
											{{ subItem.goodsName }}
										</view>
										<view style="color: #b0b1b4; font-size: 26rpx">￥ {{ subItem.salePrice || 0 }}
										</view>
									</view>

									<view class="flex-row-bt"
										style="height: 40rpx; width: 100%; color: #b0b1b4; font-size: 26rpx; line-height: 40rpx">
										<view style="padding-left: 26rpx; width: 400rpx">规格：{{ subItem.flavor || '暂无' }}
										</view>
										<view>x{{ subItem.orderQty || 0 }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @tap="moreCheckFun" class="more-view" v-if="menuList.length > 3">
					<view style="color: #fff">展开全部</view>
					<image v-if="!moreCheck"
						src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/diandan/icon-down.png" class="wh30">
					</image>
					<image v-if="moreCheck" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/diandan/icon-down.png"
						class="wh30-rotate"></image>
				</view>
				<view></view>
			</view>
			<!-- 点餐区域 -->
			<view class="h-120"></view>
			<view v-if="waitForm.callNo">
				<view class="h-120"></view>
				<view class="only-container" v-if="menuList.length">
					<view  class="bottom-but" @tap="toOrderPre">继续点餐</view>
					<!-- <view v-else class="bottom-but" @click="toOrderPre">提前点餐</view> -->
				</view>
			</view>
		</view>
		<x-popup :show="tableShow" @close="openQue" position="center" :closeOnClickOverlay="true">
			<view class="popup-container">
				<view class="popup-container-header">选择人数</view>
				<view class="popup-container-main">
					<view class="main-item" v-if="themetype == '001'" :class="{'active': queNumActive == k}" v-for="(v, k) in btnList" :key="k"
						@click="numSelect(k,v)">
						{{ v.value }}
					</view>
					
					<view class="main-item"  v-if="themetype !== '001'"  :class="{'activeBac': queNumActive == k}" v-for="(v, k) in btnList" :key="k"
						@click="numSelect(k,v)">
						{{ v.value }}
					</view>
				</view>
				<view style="height: 40rpx" v-if="!isShowInp"></view>
				<view v-if="isShowInp">
					<van-field v-model="inpValue" placeholder="请输入人数" :border="false"  type="digit" />
				</view>
				<view style="height: 60rpx" v-if="isShowInp"></view>
				<view class="popup-container-footer">
					<view class="footer-left" @tap="tableShow = false">取消</view>
					<view class="footer-right" @tap="tableConfirm">确认</view>
				</view>
			</view>
		</x-popup>
		<x-popup :show="isCancleQue" @update:show="isCancleQue = $event" position="center">
			<view class="iscan-popup">
				<view class="iscan-title">
					提示
				</view>
				<view style="height:30rpx"></view>
				<view style="height: 80rpx; text-align: center; line-height: 80rpx; color: #212121">您确定要取消排队吗？</view>
				<view style="height:30rpx"></view>
				<view class="iscan-control">
					<view class="close-btn" @click="isCancleQue= false">
						取消
					</view>
					<view class="sumbit-btn" @click="confirmCancleQue()">
						确定
					</view>
				</view>
			</view>
		</x-popup>


		<view class="QueMask" v-if="queMaskShow">
			<view class="freeQue">
				<view class="freeQueContent">
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/qnjg/queue/queVote.png" mode="widthFix"
						class="queVote" />
					<view class="queTitle">使用免排券</view>
					<view class="queText">
						您当前拥有
						<text>{{ ticketList ? ticketList.length : '0' }}</text>
						张免排券
					</view>
					<view class="queText">请确认是否使用！</view>
					<view class="queConf" @click="useQueTicket">确认</view>
				</view>
				<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/qnjg/queue/close.png" mode="widthFix"
					class="freeQueClose" @click="falseQueMask" />
			</view>
		</view>
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate } from '@/api/public.js'
	import { debounce, _ExtractParamsFromPath } from '@/until/tools.js'
	import setting from "@/common/config.js";

	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	const userInfo = uni.getStorageSync('userInfo') //用户信息
	console.log(shopInfo, 'shopInfo')
   const themetype = uni.getStorageSync('themeInfo')?.type
   
	const queMaskShow = ref(false); // 是否显示排队遮罩
	const tableShow = ref(false); // 是否显示表格
	const tableNum = ref(''); // 表格号码
	// 按钮列表
	const btnList = ref([
		{ value: '1' },
		{ value: '2' },
		{ value: '3' },
		{ value: '4' },
		{ value: '5' },
		{ value: '6' },
		{ value: '7' },
		{ value: '8' },
		{ value: '更多' }
	]);

	// 提交表单数据
	const postForm = ref({
		memberName: '',
		memberMobile: '',
		peopleNum: '',
		remark: '',
		distance: ''
	});

	// 控制是否显示输入框
	const isShowInp = ref(false);
	const inpValue = ref(''); // 输入框内容

	// 排队信息
	const waitLine = ref([]); // 排队数量
	const waitForm = ref({}); // 等待消息
	const isCancleQue = ref(false); // 取消排队防误触弹窗

	const ticketList = ref({})
	// 门店信息
	// const shopInfo = ref({}); // 门店信息

	// 是否使用免排券
	const isUseMian = ref(false);

	// 环境版本
	const envVersion = ref('release'); // 环境
    const tableSelect = ref('')
	// 默认显示的数字
	const showNum = ref(3);
	const distance = ref('')
	// 其他控制变量
	const queFlag = ref(false); // 是否排队中
	const menuList = ref([]); // 菜单列表
	const subMoreCheckIndex = ref(-1); // 更多选项的索引
	const moreCheck = ref(false); // 是否显示更多选项
	const logo = ref(''); // 门店 Logo

	// 返回按钮功能
	const backFn = () => {
		const pages = getCurrentPages();
		console.log(pages);
		if (pages.length > 1) {
			uni.navigateBack();
		} else {
			uni.switchTab({
				url: '/pages/home/index'
			})
		}
	};

	// -------------------------------------------------------初始化数据-----------------------------------------------------
	onLoad((options) => {
		console.log(setting.DEV_URL, 'setting.IS_DEV')

		if (setting.DEV_URL == "http://172.18.3.8:8090/api") {
			envVersion.value = 'develop'
		}
		if (setting.DEV_URL == "https://jtmckj.cn:4090/api") {
			envVersion.value = 'trial'
		}
		if (setting.DEV_URL == "https://jtmckj.com/api") {
			envVersion.value = 'release'
		}

		if (shopInfo) {
			logo.value = shopInfo.orgLogo
		}
		onLoadInit()
	})

	onShow((options) => {
		// onShowInit()
	})


	const onLoadInit = () => {
		postForm.value.memberName = userInfo.name
		postForm.value.memberMobile = userInfo.mobile
		// 获取排队记录
		onQueueList()
		// 获取排队预点商品
		getQueInfo()
		initGoogs()
		GetNoQueueTicketList()
	}




	// 清除排队详情
	const clearQueueCallDetailHandle = () => {
		const modal = {
			functionName: "clearQueueCallDetail_H5",
			orgCode: shopInfo.orgCode,
			contentData: { mobile: userInfo.mobile },
		};
		HFiveMemberAppObjProcess(modal).then(() => {
			initGoogs(); // 你需要自己实现 initGoogs 方法
		});
	};

	// 显示排队遮罩
	const trueQueMask = () => {
		if (isUseMian.value) {
			return;
		}
		queMaskShow.value = true;
	};

	// 隐藏排队遮罩
	const falseQueMask = () => {
		queMaskShow.value = false;
	};

	// 获取免排券列表
	const GetNoQueueTicketList = () => {
		HFiveMemberAppObjProcess({
			functionName: "GetNoQueueTicketList_H5",
			contentData: {
				memberCode: userInfo.userCode,
			},
		}).then(res => {
			ticketList.value = []
			if(res && res.length > 0){
				res.forEach(item=>{
					if(item.ticketList){
						ticketList.value = ticketList.value.concat(item.ticketList)
					}
				})
			}
			
			
			console.log(ticketList.value);
			// ticketList.value = res[0]?.ticketList || [];
		});
	};

	// 使用免排券
	const useQueTicket = () => {
		if (ticketList.value.length <= 0) {
			uni.showToast({
				icon: 'none',
				title: '暂无免排券',
			});
			return;
		}
		HFiveMemberAppObjProcess({
			functionName: "UseNoQueueTicket_H5",
			contentData: {
				queueCode: waitForm.value.code,
				ticketCode: ticketList.value[0].ticketCode,
			},
		}).then(res => {
			uni.showToast({
				icon: 'none',
				title: '使用免排券成功',
			});
			isUseMian.value = true;
			getQueInfo(); // 你需要自己实现 getQueInfo 方法
			initGoogs(); // 你需要自己实现 initGoogs 方法
			queMaskShow.value = false;
		});
	};

	// 选择多选项
	const subCheckFun = (e) => {
		const { id } = e.currentTarget.dataset;
		subMoreCheckIndex.value = subMoreCheckIndex.value === id ? -1 : id;
	};

	// 切换多选显示
	const moreCheckFun = () => {
		if (menuList.value.length <= 3) return;
		moreCheck.value = !moreCheck.value;
		showNum.value = moreCheck.value ? menuList.value.length : 3;
	};

	// 拨打电话
	const onCall = () => {
		uni.makePhoneCall({
			phoneNumber: shopInfo.orgTelephone,
		});
	};

	// 跳转到商店页面
	const goCheckShop = () => {
		uni.redirectTo({
			url: `/pages/account/shop/shop?from=queue`,
		});
	};

	// 跳转到漂流瓶页面
	const toPlp = () => {
		uni.navigateTo({
			url: `/pages/home/tbs/index`,
		});
	};

	// 获取排队人数
	const onQueueList = () => {
		HFiveMemberAppObjProcess({
			functionName: "GetQueueList_H5",
			contentData: {},
		}).then(res => {
			waitLine.value = res;
		}).catch(err => {
			console.error(err);
		});
	};

	const goCheckTableDebounce = debounce(function(e) {
		goCheckTable()
	}, 800)

	// 打开选择人数页面
	const openQue = async () => {
		getlocation()
		await HFiveMemberAppObjProcess({
			msgTrigger: '2'
		}).then(res => {
			// console.log(res.result);

			wx.requestSubscribeMessage({
				tmplIds: res.result,
				success(res) {
					// res 是一个对象，其中有订阅消息的订阅情况 
				},
				fail(res) {
					console.error('订阅失败', res);
				}
			});
		})
		setData({
			tableShow: !data.tableShow,
			inpValue: ''
		})
	}


	const toOrderPre = () => {
		// let waitForm = {
		// 	...waitForm
		// }
		// if(this.data.menuList){
		//   waitForm['menuList'] = this.data.menuList
		// }  
		// return 
		uni.navigateTo({
			url: '../../home/order/order?orderType=' + 'isQueue' + '&preOrderCode=' + waitForm.value.code
			//  + '&preOrderInfo=' + encodeURIComponent(JSON.stringify(waitForm))
		})
	}

	// 获取排队消息 + 排队点单商品信息
	const getQueInfo = () => {
		HFiveMemberAppObjProcess({
			"functionName": "GetQueueInfo_H5",
			"contentData": {
				"memberMobile": userInfo.mobile
			}
		}).then(res => {
			// this.setData({ waitForm: res })
			waitForm.value = res
			if (res.isUseTicket == '1') {
				isUseMian.value = true
			}
		}).catch(error => {})
	}
	const initGoogs = () => {
		// 通过手机号查询排队点单信息
		let sendModal = { "functionName": "GetQueueCallOrder_H5", "contentData": { "mobile": userInfo.mobile } }
		HFiveMemberAppObjProcess(sendModal).then(resQueue => {
			// 构造树形数据
			let resultFather = []
			let resultChil = []
			resQueue.forEach(item => {
				if (item.itemType === '3') {
					item['num'] = item.orderQty
					resultChil.push(item)
				} else {
					item['num'] = item.orderQty
					resultFather.push(item)
				}
			});
			let result = [...linkChildren(resultFather, resultChil)]
			menuList.value = result
		})
	}
	const linkChildren = (parents, children) => {
		// 使用 map 方法遍历 parents 数组
		return parents.map(parentItem => ({
			...parentItem,
			// 判断父子关系的id item.goodsPriceCode === parentItem.goodsCode
			detail: children.filter(item => {
				if (item.goodsPriceCode === parentItem.goodsCode) {
					item['packageCode'] = parentItem.goodsCode
					return item
				}
			})
		}));
	}


	const queNumActive = ref(-1)
	// 人数选择
	const numSelect = (k, v) => {
		console.log(k,v);
		// if (e.target.id) {
		// 	tableNum.value = e.target.id;
		// 	isShowInp.value = (e.target.id === '更多');
		// }
		console.log(v.value);
		queNumActive.value = k
        tableSelect.value = v.value
		if (v.value == '更多') {
			isShowInp.value = true; // 如果选择了按钮，则隐藏输入框
			tableNum.value = 0
		} else {
			tableNum.value = v.value
			isShowInp.value = false; // 如果选择了按钮，则隐藏输入框
		}
		console.log(tableNum.value);
	};

	// 确认取号
	const tableConfirm = () => {
		// 判断人数
		if (tableSelect.value == '更多') {
			postForm.value.peopleNum = inpValue.value;
		} else {
			postForm.value.peopleNum = tableNum.value;
		}
		console.log(tableSelect.value);
		console.log(inpValue.value);
		console.log(tableNum.value);
		console.log(postForm.value.peopleNum);
		if (!postForm.value.peopleNum){
			uni.showToast({
				title: '请选择排队人数',
				icon: 'none'
			});
			return
		}
		
		if (queFlag.value) return;
		// return
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		queFlag.value = true;
		setTimeout(() => {
			queFlag.value = false;
		}, 1000);
		
		console.log(postForm.value);
		

		postForm.value.distance = distance.value.replace('km', ''); // 清除单位

		HFiveMemberAppObjProcess({
			functionName: 'AddQueueCall_H5',
			contentData: postForm.value
		}).then(res => {
			uni.hideLoading();
			uni.showToast({
				title: '取号成功',
				icon: 'none'
			});
			getQueInfo();
			onQueueList();
		});

		// 隐藏桌位选择界面
		tableShow.value = false;
	};

	// 取消排队弹窗
	const openCancleQue = () => {
		isCancleQue.value = !isCancleQue.value;
	};

	// 取消排队
	const confirmCancleQue = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		HFiveMemberAppObjProcess({
			functionName: 'CancelQueue_H5',
			contentData: {
				code: waitForm.value.code,
				remark: ''
			}
		}).then(res => {
			isCancleQue.value = false;
			waitForm.value = {}; // 清空排队信息
			uni.hideLoading();
			console.log(res,'tableNumcacacs')
			uni.showToast({
				title: res.data,
				icon: 'none'
			});
            isUseMian.value = false
			// 更新其他状态
			tableNum.value = '';
			onQueueList();
			clearQueueCallDetailHandle();
		});
	};

	// 获取位置信息
	const getLocation = () => {
		uni.getLocation({
			type: 'gcj02',
			success(res) {
				const latitude = res.latitude + '';
				const longitude = res.longitude + '';
				const app = getCurrentInstance().appContext.config.globalProperties;
				app.global.userInfo.latitude = latitude;
				app.global.userInfo.longitude = longitude;

				HFiveMemberAppObjProcess({
					longitude: longitude,
					orgLatitude: latitude
				}).then(res => {
					const orgCode = uni.getStorageSync('ORG_CODE');
					if (orgCode) { // 如果是扫码进来的
						let filteredOrgs = res.result.filter(org => org.code == orgCode);
						app.global.location = filteredOrgs[0];
					} else { // 取最近的门店
						app.global.location = res.result[0];
						uni.setStorageSync('ORG_CODE', res.result[0].code);
					}

					distance.value = app.global.location.distance;
				});
			},
			fail() {
				uni.showToast({
					title: '请先授权获取您的位置信息',
					icon: 'none'
				});
			}
		});
	};

	// 选择人数事件
	// const numSelect = (k, v) => {
	// 	tableCrunt.value = k
	// 	if (v == '更多') {
	// 		isShowInp.value = true; // 如果选择了按钮，则隐藏输入框

	// 	} else {
	// 		isShowInp.value = false; // 如果选择了按钮，则隐藏输入框
	// 	}
	// };
</script>

<style lang="scss" scoped>
	.queue-container {
		width: 100%;
		height: 100%;
		overflow: scroll;
		padding: 18rpx 24rpx 0;
		box-sizing: border-box;

		.queue-container-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 48rpx;

			.header-left {
				display: flex;
				align-items: center;

				.header-img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 16rpx;
					border-radius: 40rpx;
				}

				.header-text {
					.text-title {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						// color: var(--one--self--color);
						line-height: 36rpx;
						padding-bottom: 18rpx;
					}

					.text-value {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--dt-colorPink);
						line-height: 26rpx;
					}
				}
			}

			.header-right {

				/* padding-right: 30rpx;*/
				&-heading__shop {
					// background: var(--btn--self--color);
					border-radius: 8rpx;
					padding: 18rpx 42rpx 18rpx 16rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					// color: var(--four--self--color);
					line-height: 26rpx;
					align-self: flex-start;
					margin-top: 11rpx;
					position: relative;

					.triangle {
						width: 0;
						height: 0;
						border-left: 9rpx solid transparent;
						border-right: 9rpx solid transparent;
						// border-top: 12rpx solid $x-color-primary;
						position: absolute;
						top: 27rpx;
						right: 16rpx;
					}
				}
			}
		}

		.queue-container-center {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 100rpx;

			.center-text {
				width: 490rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;
				line-height: 36rpx;
				padding: 0 0rpx 0 2rpx;
				position: relative;
				border-right: 2rpx solid #e6e6e6;
				z-index: 10;
				display: flex;
				align-items: center;
				padding-right: 67rpx;
               image {
				   margin-right: 5rpx;
			   }
				// &::before {
				// 	content: '';
				// 	z-index: 11;
				// 	position: absolute;
				// 	transform: translate(-50%, -50%);
				// 	/* 使用 transform 来调整元素自身的尺寸，使其真正居中 */
				// 	top: 50%;
				// 	/* 使元素的顶部对齐父元素的 50% */
				// 	left: 16rpx;
				// 	width: 20rpx;
				// 	height: 20rpx;
				// 	background-image: url();
				// 	background-size: cover;
				// 	background-repeat: no-repeat;
				// }

				.center-text-icon {
					/* content: '';*/
					/* z-index: 11;*/
					/* position: absolute;*/
					/* top: calc(50% - 10rpx) ;*/
					/* left: 0rpx;*/
					width: 16rpx;
					height: 20rpx;
					/* background-image: url("https://oss.jtmckj.com/wmp/images/home/queue/i_icon_location.png");*/
					/* background-size: cover;*/
					/* background-repeat: no-repeat;*/
				}

				.orgAddress-text {
					margin-left: 16rpx;
					width: 100%;
					flex: 1;
				}
			}

			.center-img {
				/* padding-left: 80rpx;*/
				width: 80rpx;
				height: 80rpx;
			}
		}

		.queue-container-main {
			background: var(--maincolor);
			border-radius: 16rpx;
			padding: 0 40rpx;
			margin-bottom: 20rpx;

			.main-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 35rpx 0rpx 33rpx;
				// border-bottom: 1px solid var(--line-self--color);

				.li-left {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #666666;
					line-height: 32rpx;
				}

				.li-right {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #999999;
					line-height: 32rpx;
					.li-Sum {
						color: var(--dt-colorPink);
					}
				}
			}
		}

		.queue-container-footer {
			background: var(--maincolor);
			border-radius: 16rpx;
			padding: 40rpx 40rpx 28rpx;
			margin-bottom: 39rpx;

			.footer-upper {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 60rpx;
				// color: var(--one--self--color);
				line-height: 60rpx;
				padding-bottom: 40rpx;
			}

			.footer-below {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.below-left {
					.below-left-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						line-height: 28rpx;
						padding-bottom: 32rpx;
						display: flex;
						align-items: center;
						position: relative;

						.use-ticket {
							position: absolute;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #ff3333;
							line-height: 24rpx;
							top: -40rpx;
							right: 0rpx;
						}

						image {
							margin-left: 20rpx;
							width: 100rpx;
							height: auto;
						}
					}

					.below-left-value {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}

				.below-right {
					background: var(--mainbaccolor);
					border-radius: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: var(--dt-colorPink);
					line-height: 60rpx;
					height: 60rpx;
					width: 160rpx;
					text-align: center;

					&.spe {
						background: var(--dt-backcolorPink);
						color: #ffffff;
					}
				}
			}
		}

		.queue-container-bottom {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			line-height: 24rpx;
			padding-left: 28rpx;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 2rpx;
				left: 0rpx;
				width: 16rpx;
				height: 16rpx;
				background-image: url('https://oss.jtmckj.com/wmp/images/home/queue/i_icon_star.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

			.bottom-text {
				padding-bottom: 12rpx;
			}
		}
	}

	.popup-container {
		// padding: 60rpx 48rpx 40rpx;
		width: 520rpx;

		.popup-container-header {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			// color: var(--one--self--color);
			line-height: 36rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.popup-container-main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.main-item {
				width: calc(33.33% - 18rpx);
				background: var(--mainbaccolor5);
				border-radius: 8rpx;
				text-align: center;
				padding: 23rpx 0;
				margin-bottom: 20rpx;
				color: var(--maincolorf1);
			}
		}

		.van-cell {
			background: var(--mainbaccolor);
			border-radius: 16rpx;
		}

		.van-field__control {
			color: #666666;
		}

		.popup-container-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-left {
				border-radius: 40rpx;
				border: 2rpx solid var(--maincolorbd5);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolorf2);
				line-height: 80rpx;
				width: 240rpx;
				height: 80rpx;
				text-align: center;
			}

			.footer-right {
				background: var(--dt-backcolorPink);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolor);
				line-height: 80rpx;
				width: 240rpx;
				height: 80rpx;
				text-align: center;
			}
		}
	}

	.QueMask {
		width: 100%;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		.freeQue {
			position: fixed;
			width: 65%;
			height: 650rpx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;

			.freeQueContent {
				width: 100%;
				height: 85%;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #ffffff;
				box-sizing: border-box;
				padding: 20rpx;

				.queVote {
					width: 100%;
					height: auto;
				}

				.queTitle {
					font-size: 36rpx;
					text-align: center;
					color: #212121;
					margin-top: 32rpx;
				}

				.queText {
					font-size: 32rpx;
					text-align: center;
					color: #666666;
					margin-top: 12rpx;
					letter-spacing: 2rpx;

					text {
						color: #212121;
					}
				}

				.queConf {
					width: 72%;
					padding: 24rpx 0;
					border-radius: 60rpx;
					text-align: center;
					margin: auto;
					background-color: var(--dt-backcolorPink);
					color: var(--maincolor);
					font-size: 36rpx;
					margin-top: 40rpx;
				}
			}

			.freeQueClose {
				width: 60rpx;
				height: auto;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}

	.only-container {
		width: 750rpx;
		height: 120rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		bottom: 0;
		left: 0;
		background: #f2f2f2;
		/* 全局是？*/
		position: absolute;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.bottom-but {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			width: 702rpx;
			margin-left: 24rpx;
			background: #212121;
			border-radius: 40rpx;
			color: #fff;
		}
	}

	.pre-menu-view {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 25rpx 32rpx;
	}

	.pre-menu-title {
		width: 400rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000;
		line-height: 40rpx;
	}

	.pre-menu-num {
		width: 400rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.pre-menu-cell {
		margin-top: 40rpx;
		height: 120rpx;
	}

	.pre-menu-img {
		width: 120rpx;
		height: 120rpx;
		/* border-radius: 10rpx;*/
	}

	.pre-menu-empty {
		width: 20rpx;
		height: 120rpx;
		background-color: #fff;
	}

	.pre-menu-conten {
		width: 512rpx;
		height: 120rpx;
		background-color: #fff;

		.menu-type {
			width: 80rpx;
			overflow-x: hidden;
			height: 36rpx;
			line-height: 36rpx;
			background: #e5fff6;
			border-radius: 4rpx;
			text-align: center;
			color: #2bd99f;
			font-size: 24rpx;
			margin-right: 11rpx;
			margin-top: 2rpx;
		}

		.menu-type-tc {
			width: 80rpx;
			overflow-x: hidden;
			height: 36rpx;
			line-height: 36rpx;
			background: #fff6e5;
			border-radius: 4rpx;
			text-align: center;
			color: #212121;
			font-size: 24rpx;
			margin-right: 11rpx;
			margin-top: 2rpx;
		}

		.menu-type-tcxq {
			width: 150rpx;
			overflow-x: hidden;
			height: 36rpx;
			line-height: 36rpx;
			background: #fff6e5;
			border-radius: 4rpx;
			text-align: center;
			color: #212121;
			font-size: 24rpx;
			margin-right: 11rpx;
			margin-top: 2rpx;
		}

		.type-desc {
			width: calc(100% - 120rpx);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			line-height: 40rpx;
		}

		.menu-desc {
			width: 444rpx;
			height: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
			overflow-x: hidden;
		}

		.price {
			height: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000;
			line-height: 40rpx;
			height: 27rpx;
		}

		.old-price {
			margin-left: 12rpx;
			margin-top: 10rpx;
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			line-height: 30rpx;
			/* text-decoration-line: line-through;*/
		}

		.price-num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			width: 80rpx;
			/* background-color: yellow;*/
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}
	}

	.h-60 {
		height: 60rpx;
	}

	.h-120 {
		height: 120rpx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-row-bt {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.more-view {
		margin-top: 20rpx;
		height: 100rpx;
		font-size: 26rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.wh30-rotate {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(180deg);
	}

	.wh30 {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.wh30-detail {
		width: 30rpx;
		height: 30rpx;
	}

	.wh30-detail-rotate {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(180deg);
	}

	.main-item.active {
		/* 高亮样式 */
		background-color: var(--mainbaccolor) !important;
		/* 高亮时背景 */
		color: var(--dt-colorPink) !important;
		/* 高亮时文字颜色 */
	}
	.main-item.activeBac {
		/* 高亮样式 */
		background-color:var(--maincolorf1) !important;
		/* 高亮时背景 */
		color: var(--maincolor) !important;
		/* 高亮时文字颜色 */
	}
	

	.iscan-popup {
		width: 500rpx;
		.iscan-title {
			text-align: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 36rpx;
			padding: 20rpx 0 0 48rpx;
		}


		.iscan-control {
			// width: 460rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			// padding: 0 48rpx 28rpx;
		}

		.close-btn {
			padding: 11px 0;
			border-radius: 20px;
			font-size: 16px;
			line-height: 16px;
			width: 124px;
			text-align: center;
			color: var(--maincolorf2);
			border: 1px solid var(--maincolorbd5);
		}

		.sumbit-btn {
			padding: 11px 0;
			border-radius: 20px;
			font-size: 16px;
			line-height: 16px;
			width: 124px;
			text-align: center;
			color: var(--maincolor);
			background: var(--dt-backcolorPink);
		}
	}
</style>